﻿<demos:DemoItem x:Class="DemoApplication.Demos.Controls.SnapDecoratorElement"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:bh="http://www.brokenhouse.co.uk/wpf"
                xmlns:demos="clr-namespace:DemoApplication.Demos"
                Group="Controls" Label="Snap Decorator" MaxWidth="1000">

    
    <DockPanel Margin="1">

        <Grid DockPanel.Dock="Top" Margin="2" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <StackPanel Margin="0,0,0,5" Grid.ColumnSpan="3" >
                 <TextBlock TextWrapping="Wrap" FontWeight="Bold" FontSize="14">
                    Snap Decorator
                </TextBlock>
                <TextBlock TextWrapping="Wrap" Margin="0,5,0,0">      
                    The <Bold>SnapDecorator</Bold> will position its child so that its top left corner will be snapped
                    to device pixels. It is intended to be used for non-bitmap based elements; 
                    bitmaps can be displayed using the <Bold>Icon</Bold> element.
                </TextBlock>
                <TextBlock TextWrapping="Wrap" Margin="0,5,0,0">      
                    There are few cases where the <Bold>SnapDecorator</Bold> should be used. However, if you are working
                    with a thrid-party component then the
                    <Bold>SnapDecorator</Bold> can be used to snap that component to 
                    device pixels.
                </TextBlock>
                <TextBlock TextWrapping="Wrap" Margin="0,5,0,0">    
                    In this simple case to show the affectiveness of the
                    <Bold>SnapDecorator</Bold> we are using a sample image with the 
                    <Bold>SnapDecorator</Bold> element.
                </TextBlock>
            </StackPanel>
            <TextBlock Grid.Row="1" Grid.Column="0" Text="Horizontal" Margin="2" VerticalAlignment="Center"/>
            <Slider Grid.Row="1" Grid.Column="1" Minimum="0.0" Maximum="0.95" SmallChange="0.05" Value="{Binding HorizontalOffset}" Margin="2"/>
            <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding HorizontalOffset, StringFormat=({0:F2})}" VerticalAlignment="Center"/>
            <TextBlock Grid.Row="2" Grid.Column="0" Text="Vertical" Margin="2" VerticalAlignment="Center"/>
            <Slider Grid.Row="2" Grid.Column="1" Minimum="0.0" Maximum="0.95" SmallChange="0.05" Value="{Binding VerticalOffset}" Margin="2"/>
            <TextBlock Grid.Row="2" Grid.Column="2" Text="{Binding VerticalOffset, StringFormat=({0:F2})}" VerticalAlignment="Center"/>
        </Grid>


        <StackPanel>
            <Border Margin="2,0,0,2"
                    BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" 
                    BorderThickness="1" CornerRadius="2" SnapsToDevicePixels="True"
                    Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">

                <StackPanel DockPanel.Dock="Top" Margin="2" >
                    <TextBlock Text="Image"/>
                    <TextBlock FontSize="8">
                        <Run>With</Run>
                        <Run FontWeight="Bold">SnapDecorator</Run>
                    </TextBlock>
                    <StackPanel Orientation="Horizontal" Margin="{Binding OffsetMargin}">
                        <bh:SnapDecorator Margin="3" VerticalAlignment="Center"><Image Width="16" Height="16" Margin="0" Source="/DemoApplication;component/TestIcon.ico"/></bh:SnapDecorator>
                        <bh:SnapDecorator Margin="3" VerticalAlignment="Center"><Image Width="16" Height="16" Margin="0" Source="{Binding Path=Icons[0]}"/></bh:SnapDecorator>
                        <bh:SnapDecorator Margin="3" VerticalAlignment="Center"><Image Width="20" Height="20" Margin="0" Source="{Binding Path=Icons[1]}"/></bh:SnapDecorator>
                        <bh:SnapDecorator Margin="3" VerticalAlignment="Center"><Image Width="24" Height="24" Margin="0" Source="{Binding Path=Icons[1]}"/></bh:SnapDecorator>
                        <bh:SnapDecorator Margin="3" VerticalAlignment="Center"><Image Width="28" Height="28" Margin="0" Source="{Binding Path=Icons[1]}"/></bh:SnapDecorator>
                        <bh:SnapDecorator Margin="3" VerticalAlignment="Center"><Image Width="32" Height="32" Margin="0" Source="{Binding Path=Icons[2]}"/></bh:SnapDecorator>
                    </StackPanel>
                </StackPanel>
            </Border>

            <Border Margin="2,0,0,2"
                    BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" 
                    BorderThickness="1" CornerRadius="2" SnapsToDevicePixels="True"
                    Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">

                <StackPanel DockPanel.Dock="Top" Margin="2" >
                    <TextBlock Text="Image"/>
                    <TextBlock FontSize="8">
                        <Run>Without</Run>
                        <Run FontWeight="Bold">SnapDecorator</Run>
                    </TextBlock>
                    <StackPanel Orientation="Horizontal" Margin="{Binding OffsetMargin}">
                        <Image Width="16" Height="16" Margin="3" VerticalAlignment="Center" Source="/DemoApplication;component/TestIcon.ico"/>
                        <Image Width="16" Height="16" Margin="3" VerticalAlignment="Center" Source="{Binding Path=Icons[0]}"/>
                        <Image Width="20" Height="20" Margin="3" VerticalAlignment="Center" Source="{Binding Path=Icons[1]}"/>
                        <Image Width="24" Height="24" Margin="3" VerticalAlignment="Center" Source="{Binding Path=Icons[1]}"/>
                        <Image Width="28" Height="28" Margin="3" VerticalAlignment="Center" Source="{Binding Path=Icons[1]}"/>
                        <Image Width="32" Height="32" Margin="3" VerticalAlignment="Center" Source="{Binding Path=Icons[2]}"/>
                    </StackPanel>
                </StackPanel>
            </Border>
        </StackPanel>
    </DockPanel>
</demos:DemoItem>
